<template>
  <div id="app">
    <!-- 导航 -->
    <ul v-if="show">
      <li>
        <!-- 声明式导航 -->
        <!-- <router-link to="/">Home</router-link> -->
        <!-- <router-link tag="h3" :to="{ path: '/' }">Home</router-link> -->
        <!-- 编程式导航 通过js完成路由的跳转 -->
        <!-- <h1 @click="goHome('/')">Home</h1> -->
        <div @click="goHome('/')">Home</div>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
      <li>
        <router-link to="/admin">后台</router-link>
      </li>
    </ul>
    <!-- 路由组件显示的容器 -->
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'app',
      show: true,
    }
  },
  methods: {
    goHome(path) {
      // console.log(this.$router.__proto__.constructor)
      // 通过 this中的$router对象中的push方法完成路径的跳转
      // 字符串，写的最多的
      // this.$router.push(path)
      // 对象
      this.$router.push({ path })
    },
  },
}
</script>


<style lang="scss">
</style>
